import React, { useState } from 'react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Card } from './ui/card';
import { Search, ArrowRight } from 'lucide-react';

interface TargetInputProps {
  onSubmit: (target: string) => void;
  disabled: boolean;
  previewUrl: string | null;
  mediaType: 'image' | 'video' | null;
}

const TargetInput: React.FC<TargetInputProps> = ({ 
  onSubmit, 
  disabled, 
  previewUrl, 
  mediaType 
}) => {
  const [target, setTarget] = useState<string>('');
  const [suggestions, setSuggestions] = useState<string[]>([
      '床','沙发','椅子','桌子','灯','电视','笔记本电脑','衣柜','窗户','门','盆栽','相框'
  ]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (target.trim()) {
      onSubmit(target.trim());
    }
  };

  const handleSuggestionClick = (suggestion: string) => {
    setTarget(suggestion);
  };

  return (
    <div className="space-y-6">
      {previewUrl && (
        <div className="mb-6">
          <Label className="block mb-2">预览</Label>
          <div className="rounded-lg overflow-hidden border border-gray-200 bg-black/5">
            {mediaType === 'image' ? (
              <img 
                src={previewUrl} 
                alt="预览图片" 
                className="w-full h-auto max-h-[300px] object-contain"
              />
            ) : (
              <video 
                src={previewUrl} 
                controls 
                className="w-full h-auto max-h-[300px]"
              />
            )}
          </div>
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="target">请输入要寻找的目标物体</Label>
          <div className="flex gap-2">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-4 w-4" />
              <Input
                id="target"
                value={target}
                onChange={(e) => setTarget(e.target.value)}
                placeholder="例如：猫、椅子、手机..."
                className="pl-10"
                disabled={disabled}
              />
            </div>
            <Button 
              type="submit" 
              disabled={!target.trim() || disabled}
              className="bg-accent hover:bg-accent/90 text-white"
            >
              <ArrowRight className="h-4 w-4 mr-2" />
              确认
            </Button>
          </div>
        </div>
      </form>

      <div className="space-y-2">
        <Label>常见目标物体</Label>
        <div className="flex flex-wrap gap-2">
          {suggestions.map((suggestion) => (
            <Button
              key={suggestion}
              variant="outline"
              size="sm"
              onClick={() => handleSuggestionClick(suggestion)}
              disabled={disabled}
              className="rounded-full"
            >
              {suggestion}
            </Button>
          ))}
        </div>
      </div>

      <div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-100">
        <h3 className="text-sm font-medium text-blue-800 mb-2">提示</h3>
        <p className="text-sm text-blue-700">
          请输入您想要在图片或视频中寻找的目标物体名称。系统将使用AI模型进行识别，并通过语音告知您目标物体的位置信息。
        </p>
      </div>
    </div>
  );
};

export default TargetInput;